import { Component } from 'react'
import { Image, View } from '@tarojs/components'
import './index.scss'
import Taro from '@tarojs/taro'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
//组件

import {PrEditorProps, PrEditorState} from "./type"

export default class PrEditor extends Component <PrEditorProps,PrEditorState>{
  constructor(props) {
    super(props)
    this.state={
      editor:null,
      html:""
    }
    this.setEditor = this.setEditor.bind(this)
  }

  // UNSAFE_componentWillMount() {

  // }

  // UNSAFE_componentWillReceiveProps(nextProps) {
  //   let props = this.props
  //   if(nextProps)
  // }

  componentDidMount() {
    this.setState({
      html:this.props.htmlStr
    })
  }
  
  componentWillUnmount() {
    if (this.state.editor == null) return
    this.state.editor.destroy()
    this.setState({
      editor:null
    })
  }

  //工具栏
  toolbarConfig: Partial<IToolbarConfig> = { }
  //编辑器配置
  editorConfig: Partial<IEditorConfig> = {
    placeholder: this.props.placeholder || '请输入内容...',
  }
  
  setEditor(editor){
    this.setState({
      editor
    })
  }
  setHtml(html){
    this.props.onChange(html)
      // this.setState({
      //   html
      // })
  }

  render() {
    return (
      <View className={`PrEditor ${this.props.className}`}>
        {
          this.props.hideTool?"":
          <Toolbar
            className={this.props.className_tool || ""}
            editor={this.state.editor}
            defaultConfig={this.toolbarConfig}
            mode="default"
            style={{ borderBottom: '1px solid #ccc' }}
          />
        }
        <Editor
          className={this.props.className_editor || ""}
          defaultConfig={this.editorConfig}
          value={this.props.htmlStr}
          onCreated={this.setEditor}
          onChange={editor => this.setHtml(editor.getHtml())}
          mode="default"
        />
      </View>
    )
  }
}